<!--
 * @ModuleName: 
 * @Author: yuetchn@163.com
 * @LastEditTime: 2023-01-08 22:38:09
-->
<template>
  <div v-loading="menuTreeLoading" class="permission_box">
    <div class="nav">
      <div class="keyword">
        <el-input v-model.trim="menuTreeKeyword" placeholder="过滤..." clearable />
        <el-button style="margin-left:8px;" @click="getMenuTreeData">
          <g-svg-icon name="refresh" />
        </el-button>
      </div>
      <div class="submit">
        <el-button type="primary" @click="submitBind">保存</el-button>
      </div>
    </div>
    <div class="body">
      <el-tree ref="treeRef" :data="menuTreeData" :filter-node-method="filterTree" :props="menuTreeProps" default-expand-all node-key="id" show-checkbox />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, watch } from "vue";
import { ElTree } from "element-plus"
import { message } from "ant-design-vue";
import { GetMenuTree } from "@/api/system/menu";
import { PostRoleMenu, GetRoleMenu } from "@/api/system/role"

const menuTreeLoading = ref(false)
const menuTreeKeyword = ref("");
const treeRef = ref < InstanceType < typeof ElTree >>()
const menuTreeData = ref < any[] >([]);
const menuTreeProps = {
  label: "title",
};

const props = defineProps({
  id: {
    type: Number,
    default: 0,
  },
})

onMounted(() => {
  init()
});

watch(() => menuTreeKeyword.value, (v) => {
  treeRef.value?.filter(v)
})

const init = async () => {
  try {
    menuTreeLoading.value = true
    await getMenuTreeData();
    const { data } = await GetRoleMenu(props.id);
    data.data.menu_ids.forEach((f: number) => {
      const node = treeRef.value?.getNode(f);
      if (node?.isLeaf) {
        treeRef.value?.setChecked(f, true, false)
      }
    })
  } finally {
    menuTreeLoading.value = false
  }
}

// 获取菜单树
const getMenuTreeData = async () => {
  const { data } = await GetMenuTree();
  menuTreeData.value = data.data.tree_data;
};

// 过滤树
const filterTree = (value: string, data: { label: string;id: number } | any) => {
  if (!value) return true;
  return data.title.includes(value);
};

const submitBind = async () => {
  try {
    menuTreeLoading.value = true
    const menu_ids = treeRef.value?.getCheckedKeys() as number[]
    const half_menu_ids = treeRef.value?.getHalfCheckedKeys() as number[]
    const { data } = await PostRoleMenu({ role_id: props.id, menu_ids: [...menu_ids, ...half_menu_ids] })
    message.success(data.msg)
  } finally {
    menuTreeLoading.value = false
  }
}

</script>
<style lang="scss" scoped>
  .permission_box {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .nav {
      padding-bottom: 15px;
      display: flex;
      align-items: center;
      flex: 0 0 auto;

      .keyword {
        flex: 1;
        display: flex;
        align-items: center;
      }

      .submit {
        flex: 0 0 auto;
        margin-left: 30px;
        text-align: right;
        width: 150px;
      }
    }

    .body {
      flex: 1;
      overflow:auto;
    }
  }
</style>